/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {StyleSheet, View, TextInput, TouchableHighlight, Dimensions} from 'react-native';
import { Button, Toast, Picker, List, Icon } from 'antd-mobile-rn';


import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../../library/comp';


/******************************************************************************************
 * Export Class
 ******************************************************************************************/
const Scwidth = Dimensions.get('window').width;
const ScHeight = Dimensions.get('window').height;

export default class House extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
		this.state = {
            //VercodeCText
			VercodeTime:120,
			VercodeCText:"获取验证码",
			VercodeActive:true,

            //姓名
            name:'',
            code:'',

            // 身份picker的变量
            family:[
                {label:'家属',value:'家属'},
                {label:'户主',value:'户主'},
                {label:'租客',value:'租客'}
            ],
            // 身份选择时更改的value
            familyvalue:[],

            //小区默认值  默认值
            buildinglist:[
                {label:'珑城花园',value:'珑城花园'},
            ],            

            buildingvalue:['珑城花园'],

            //房屋和单元  数组
            unitroomlist:[],

            //房屋和单元  默认值
            unitroomval:[],


            //自己的手机号  户主需要
            selfmobile:"",

            //户主的手机号  自己需要
            housematermobile:"",

		};
    }

    componentDidMount(){


        //获取 单元房子的数组
        // HttpTemp.get({
        //     url:"/CPage/house/getunithouse.php",
        //     data:{
        //         fk_subdistrict_id:1,
        //     },
        //     success:(res) => {
        //         let data = res.data;
        //         for(var key in data){
        //             data[key]['label'] = data[key]['set_name'];
        //             data[key]['value'] = data[key]['id'];
        //             let house = data[key]['house'];

        //             for(var hkey in house){
        //                 house[hkey]['label'] = house[hkey]['set_name'];
        //                 house[hkey]['value'] =  house[hkey]['id'];
        //             }

        //             data[key]['children'] = house;
        //         }
        //         this.setState({
        //             unitroomlist:data
        //         })

        //         console.log(data);

        //     }
        // })

        // //获取自己的手机号码
        // HttpTemp.get({
        //     url:"/CPage/user/detail.php",
        //     success:(res) => {
        //         let data = res.data;
        //         this.setState({
        //             selfmobile:data.set_mobile
        //         });    
        //     }
        // })
    }

    //获取户主信息
    getHousemaster = (id)=>{
        //获取户主的手机号
        // let that = this;
        // HttpTemp.get({
        //     url:"/CPage/myhouse/gethost.php",
        //     data:{
        //         id: id
        //     },
        //     success:(res) => {
        //         console.log(res);
        //         let data = res.data;
        //         this.setState({
        //             housematermobile:data.set_mobile
        //         });    
        //     },
        //     error: {
        //         code: (res)=> {
        //             that.setState({
        //                 housematermobile:""
        //             })    
        //             Toast.info(res.msg, 1);
        //         }
        //     }
        // })

    }


	/**
	 * 点击获取验证码
	 */
	getVerCode = ()=>{

		let time = this.state.VercodeTime;
		let CText = this.state.VercodeCText;
		let time_time = "秒后重发";

		if(this.state.VercodeActive){
			//发送短信接口
			this.setState({
				VercodeTime:time,
				VercodeCText:time + time_time,
				VercodeActive:false,
			})

            // HttpTemp.post({

            //     url:"/CPage/myhouse/logic/sendmsg.php",
            //     data:{
            //         set_mobile:this.state.housematermobile
            //     },
            //     success:(res) => {
            //         Toast.info('成功发送验证码', 1);
            //     },
            //     error: {
            //         code: (res)=> {
            //             Toast.info(res.msg, 1);
            //         }
            //     }
    
            // })
    


			Runtime = ()=>{
				setTimeout(()=>{
					if(this.state.VercodeTime > 1){
						this.setState({
							VercodeTime:this.state.VercodeTime - 1,
							VercodeCText:this.state.VercodeTime - 1 + time_time,
							VercodeActive:false,
						})
						Runtime();	
					}else{
						this.setState({
							VercodeTime:time,
							VercodeCText:CText,
							VercodeActive:true,
						})	
					}	
				},1000);		
			}
			Runtime();
		}
    }
    

    submitInfo(){

        if(this.state.unitroomval.length == 0){
            Toast.info('请选择楼栋房号', 1);
            return;
        }
        if(this.state.familyvalue.length == 0){
            Toast.info('请选择身份', 1);
            return;
        }
        if(this.state.familyvalue.length == 0){
            Toast.info('请选择身份', 1);
            return;
        }

        if(this.state.name == ""){
            Toast.info('请选填写姓名', 1);
            return;
        }


        let data = {
            fk_house_id:this.state.unitroomval[1],
            enum_apply_status:this.state.familyvalue[0],
            set_apply_name:this.state.name,
        };
        if(this.state.familyvalue[0] == "家属" && this.state.familyvalue[0] == "租客"){
            if(this.state.code == ""){
                Toast.info('请选填验证码', 1);
                return;
            }
    
            data['set_mobile'] = this.state.housematermobile;
            data['code'] = this.state.code;
        }   

        // HttpTemp.post({

        //     url:"/CPage/myhouse/logic/apply.php",
        //     data:data,
        //     success:(res) => {
        //         Toast.info("已提交申请", 1);
        //         this.Nav.navigate('UserSettingHouse');
        //     },
        //     error: {
        //         code: (res)=> {
        //             Toast.info(res.msg, 1);
        //         }
        //     }

        // })




    }



    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 选择身份晚上时单击确定按钮出发的事件
     */
    identity = (value)=>{
        this.setState({
            value:value
        })
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<CPage>

                {/* 内容部分 */}
				<CContent mt='80' bg='#efeff4' >

                    {/* 房屋信息 */}
                    <CRow y='center' pa='20'>
                        <CText style={{ color:"#999" }}>房屋信息</CText>
                    </CRow>

                    {/* 房屋认证所需内容 */}
                    <View style={{
                        backgroundColor:'#fff', 
                        marginBottom: 10,
                        marginLeft: 10,
                        marginRight: 10,
                        borderRadius: 4
                    }}>
                        {/* 选择小区 */}
                        <List style={{ height:50, justifyCContent:"center",borderBottomColor: '#fff', borderTopColor: '#fff'  }}>
                            <Picker
                                data={this.state.buildinglist}
                                value={this.state.buildingvalue}
                                cols={1}
                                onChange={(val)=>{
                                }}
                                itemStyle={{fontSize: 14}}
                                style={{
                                    borderBottomColor: '#fff', borderTopColor: '#fff'
                                }}
                            >
                                <List.Item arCRow="horizontal" last>
                                    <CText size='32'>小区</CText>
                                </List.Item>
                            </Picker> 
                        </List>

                        {/* 选择楼栋和房号 */}

                        <List style={{ height:50, justifyCContent:"center" }}>
                            <Picker
                                data={this.state.unitroomlist}
                                value={this.state.unitroomval}
                                cols={2}
                                onChange={(val)=>{
                                    val[1] = parseInt(val[1]);
                                    this.setState({
                                        unitroomval:val
                                    })

                                    this.getHousemaster(val[1]);

                                }}
                            >
                                <List.Item arCRow="horizontal" last>
                                    <CText size='32'>楼栋房号</CText>
                                </List.Item>
                            </Picker> 
                        </List>

                        <List style={{ height:50, justifyCContent:"center" }}>
                            <Picker
                                data={this.state.family}
                                value={this.state.familyvalue}
                                cols={1}
                                onChange={(val)=>{
                                    this.setState({
                                        familyvalue:val
                                    })

                                }}
                            >
                                <List.Item arCRow="horizontal" last>
                                    <CText size='32'>身份</CText>
                                </List.Item>
                            </Picker> 
                        </List>



                    </View>
                    
                    {/* 个人信息标题 */}
                    <CRow y='center' pa='20'>
                        <CText style={{ color:"#999" }}>个人信息</CText>
                    </CRow>

                    {/* 个人信息所需内容 */}
                    <View style={{
                        backgroundColor:'#fff', 
                        marginBottom: 10,
                        marginLeft: 10,
                        marginRight: 10,
                        borderRadius: 4
                    }}>

                        {/* 真实姓名 */}
                        <CRow mx='20' bb='2 #f0f0f0' px='20' h='100' y='center'>
                            <CBetween>
                                <CHand y='center'>
                                    <CText size='32'>姓名</CText>
                                </CHand>
                                <CHand y='center'>
                                    <TextInput
                                    defaultValue={this.state.name}
                                    onChangeCText={(val)=>{
                                        this.setState({
                                            name:val
                                        })
                                    }}
                                    placeholder='请输入您的真实姓名' underlineColorAndroid='transparent' style={{width:160, fontSize:16, CTextAlign:"right"}}></TextInput>
                                </CHand>
                            </CBetween>
                        </CRow>

                        <CRow mx='20' px='20' h='100' y='center'>
                            <CBetween>
                                <CHand y='center'>
                                    <CText size='32'>我的手机号码</CText>
                                </CHand>
                                <CHand y='center'>
                                    <CText size='32'>{this.state.selfmobile}</CText>
                                </CHand>
                            </CBetween>
                        </CRow>

                        <CRow mx='20' px='20' h='100' y='center'>
                            <CBetween>
                                <CHand y='center'>
                                    <CText size='32'>户主手机号码</CText>
                                </CHand>
                                <CHand y='center'>
                                    <CText size='32'>{this.state.housematermobile}</CText>
                                </CHand>
                            </CBetween>
                        </CRow>

                        <CRow mx='20' px='20' h='100' y='center'>
                            <CBetween>
                                <CHand y='center' 
                                >
                                    <TextInput
                                    defaultValue={this.state.code}
                                    onChangeCText = {(val)=>{
                                        this.setState({
                                            code:val
                                        })
                                    }}
                                    placeholder='请输入验证码' underlineColorAndroid='transparent' style={{width:160, fontSize:16, CTextAlign:"left"}}></TextInput>
                                </CHand>
                                <CHand y='center'
                                    style={{
                                        borderWidth:1,
                                        borderColor:'#0c6',
                                        height:26,
                                        paddingLeft:6,
                                        paddingRight:6,
                                        borderRadius:5
                                    }}
                                >
                                    <TouchableHighlight 
                                        underlayColor="rgba(0,0,0,0)"
                                        onPress={this.getVerCode}
                                    >
                                        <CText style={[style.green, {fontSize:12}]}>{this.state.VercodeCText}</CText>
                                    </TouchableHighlight>
                                </CHand>
                            </CBetween>
                        </CRow>




                    </View>

                    {/* 提交按钮 */}
                    <View style={{marginTop:20, marginBottom: 20, marginLeft: 10, marginRight: 10}}>
                        <Button onClick={()=>{
                            this.submitInfo()
                        }} style={{backgroundColor:'#21ac43', borderWidth:0, height:45 }}><CText color='#fff' size='32'>提交</CText></Button>
                    </View>

				</CContent>
				
                {/* 头部 */}
				<CHeader bg='#fff' h='80'>
                    <CBetween px='20'>
                        <CHand active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>房屋认证</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                
			</CPage>
		);
	}
}

const style = StyleSheet.create({
	green:{
        color:"#00CC66",
	},
	gray:{
		color:"#AEAEAE"
	},
	topCText:{
		fontSize:20
	},
	topCTextActive:{
		borderBottomColor:'#00CC66',
		borderBottomWidth:2,
	},
})